<template>
  <div class="edit">
    <div style="margin: 50px;"></div>
    <el-form label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="group.input"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="group.age"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="group.sex"></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model="group.phone"></el-input>
      </el-form-item>
      <el-form-item label="工号">
        <el-input v-model="group.wordId"></el-input>
      </el-form-item>
      <el-form-item label="薪资">
        <el-input v-model="group.money"></el-input>
      </el-form-item>
      <el-button @click="edit">修改</el-button>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      //   name: "",
      //   age: "",
      //   sex: "",
      //   phone: "",
      //   id: "",
      //   money: "",
      group: {},
      id: ""
    };
  },
  methods: {
    edit() {
      axios.put(
        "https://element-2eaa4.firebaseio.com/peopleInfo/" + this.id + ".json",
        this.group
      );
      alert("修改的数据已经提交到数据库中，请查看！功能完善中~~~~");
    }
  },
  created() {
    axios
      .get("https://element-2eaa4.firebaseio.com/peopleInfo.json")
      .then(res => {
        return res.data;
      })
      .then(data => {
        for (let group in data) {
          console.log(data[group]);
          this.group = data[group];
          this.id = group;
          //   this.name = data[group].input;
          //   this.age = data[group].age;
          //   this.sex = data[group].sex;
          //   this.phone = data[group].phone;
          //   this.id = data[group].wordId;
          //   this.money = data[group].money;
        }
      });
  }
};
</script>
<style lang="less" scoped>
.edit {
  width: 500px;
  height: 100%;
  position: absolute;
  top: 20px;
  left: 20%;
  transform: translateX(-50%, -50%);
}
</style>